<template>
  <div class="main">
      <div class="title">
        <i><img src="../../assets/images/icon/icon_success.png"/></i><span>挂失成功!</span>
      </div>
      <ul class="info">
        <li><span>姓名</span><label>{{data.aac003}}</label></li>
        <li><span>社保保障号码</span><label>{{data.aac002}}</label></li>
        <li><span>卡号</span><label>{{data.aaz500}}</label></li>
        <li><span>手机号码</span><label>{{data.mobile}}</label></li>
        <li><span>社保卡状态</span><label>{{data.aaz502}}</label></li>
        <li><span>挂失日期</span><label class="c-red">{{today}}</label></li>
      </ul>
      <div class="time_tip">社保卡<span>挂失有效期为5天。</span></div>

    <!--<div>
      <div class="result_icon"></div>
      <div class="cert_tip"><span>挂失失败！</span><br/>手机号与注册手机账号信息不符，请重试</div>
      <div><router-link to="reportLoss"><input class="btn_sure" type="button" value="返回"/></router-link></div>
    </div>-->
  </div>
</template>

<script>
  export default {
    data () {
      return {
        data: [],
        token: localStorage.getItem("token"),
        cardNum:  '',
        mobile:'',
        today:''
      }
    },
    methods:{
      getData(){
        this.$http.post("transmit",{
          "access_token":this.utils.getToken(),
          "transmitUrl": "/ssCardMgr/cardInfoQuery",
          "method": "get",
          "objectId": "f4860abe5e8e49eca2725360f0c65c6c",
          "objectType": "1"
        }).then(res => {
          console.log(res)
          if (res.success) {
            this.data = res.body;
          }
        });
      }
    },
    created(){
        let date=new Date();
        this.today=date.getFullYear()+"-"
        +((date.getMonth()+1)>9?(date.getMonth()+1):'0'+(date.getMonth()+1))+"-"
        +(date.getDate()>9?date.getDate():'0'+date.getDate());
      this.getData();
    }
  }
</script>

<style  lang="less" scoped>
  .main{max-width: 786px;margin: 0 auto;width: 100%;text-align:center;}
  .title{height: 90px;padding-bottom:8px; background: url("../../assets/images/social/topbg_loss.png") bottom no-repeat;background-size:100%;}
  .title i{width: 32px;height: 32px;display: block;margin:0 auto;padding-top: 16px;}
  img{width: 100%;height: 100%;}
  .title span{font-size: 16px; color: #333;line-height: 40px;}
  .time_tip{font-size: 14px;text-align: left;margin-left: 4%;color: #888888;margin-top: 20px;}
  .time_tip span,.info label.c-red{color: #F65150;}
  .info{background: #ffffff;margin-top: 12px;padding-left:4%;width:96%;overflow:hidden;position:relative;}
  .info:before{border: 1px solid #DFDFDF;left: -15px;top:0px;width: 120%;position: absolute; display: block;content: "";transform: scaleY(0.5);}
  .info:after{border: 1px solid #DFDFDF;left: -15px;bottom:0px;width: 120%;position: absolute; display: block;content: "";transform: scaleY(0.5);}
  .info li{list-style: none;text-align: left;font-size: 14px;height: 51px;line-height: 51px;}
  .info li:after{border: 1px solid #DFDFDF;left: 0px;top:0px;width: 99.5%;position: relative; display: block;content: "";transform: scaleY(0.5);}
  .info span{display: inline-block;width: 46%;color: #888888;}
  .info label{display: inline-block;width: 50%;margin-right: 4%;color: #353535;text-align: right;}
  .result_icon{width: 80px;height: 80px;background: url("../../assets/images/icon/icon-fail.png") no-repeat center;
    border-radius: 50%;background-size: 80px;margin: 90px auto 0 auto;}
  .cert_tip{font-size: 14px; color: #888; line-height: 30px;margin-top:18px;}
  .cert_tip span{font-size: 16px;color: #333333;}
  .btn_sure{width: 90%;height: 50px;background: #3399FF;border-radius: 4px;border: none;font-size: 18px;color: #FFFFFF;margin-top: 35px;-webkit-appearance: none;outline: none;}
</style>
